<template>
  <div>
    <p></p>
    <!-- mbx -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品</el-breadcrumb-item>
        <el-breadcrumb-item>分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 分类列表 -->
    <div class="dt">
      <li class="li">分类</li>
      <!-- 列表 -->
      <li
        :class="zt == item.category_id ? 'l1' : ''"
        v-for="(item, index) in lisz"
        @click="fl(item)"
        :key="index"
      >
        {{ item.category_name }}
      </li>
    </div>
    <div class="dg">
      <div class="dc">
        <!-- 单个商品 -->
        <div
          @click="tj(item)"
          class="dc1"
          v-for="(item, index) in list"
          :key="index"
        >
          <!-- 图片 -->
          <img :src="item.product_picture" alt="" class="img" />
          <p class="pa1">{{ item.product_title }}</p>
          <p class="pa2">{{ item.product_name }}</p>
          <p class="pa3">
            <span>{{ item.product_selling_price }}</span>
            <span class="s1">{{ item.product_price }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
 
 
<script>
export default {
  data() {
    return {
      lisz: [], //列表数据
      zt: -1, //切换颜色
      list: [],
    };
  },
  mounted() {
    this.hq();
    this.hq2();
  },
  methods: {
    hq() {
      //获取列表栏数据
      this.$axios.post("/api/product/getCategory", {}).then((a) => {
        let { code: c, category: list } = a;
        if (c == "001") {
          ///如果成功
          this.lisz = list;
          //   赋值
          console.log(this.lisz);
        }
      });
    }, // {"categoryID":[],"currentPage":1,"pageSize":15}
    hq2(a) {
      // 获取商品

      this.$axios
        .post("/api/product/getProductByCategory", {
          categoryID: [a != undefined ? a : 1], //当前分类
          currentPage: 1, //第几页
          pageSize: 30, //数据 多少
        })
        .then((a) => {
          // 获取变量
          let { code, Product: list } = a;
          //   成功时
          if (code == "001") {
            //   获取数据
            this.list = list;
            this.list.map((a) => {
              return (a.product_picture = `http://47.115.85.237:3000/${a.product_picture}`);
            });
          }
        });
    },
    fl(a) {
      // 点击换分类
      this.zt = a.category_id;
      this.hq2(a.category_id);
    },
    tj(a) {
      //传参
      sessionStorage.setItem("item", JSON.stringify(a));
      this.$router.push("/delai");
    },
  },
};
</script>
<style scoped>
li {
  list-style: none;
  width: 70px;
  height: 30px;
  display: inline-block;
  text-align: center;
  border: #f0f0f0 solid 1px;
  text-align: center;
  line-height: 27px;
}
.li {
  border: none;
  font-size: 17px;
  font-weight: 600;
}
.l1 {
  background: orangered;

  color: papayawhip;
}
.dt {
  margin-top: 25px;
}
.dc {
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 670px;
}
.dc1 {
  text-align: center;
  width: 17.5%;
  background: #ffffff;
  margin-left: 2.5%;
  margin-bottom: 20px;
  height: 490px;
}
.im {
  width: 100%;
  height: 100%;
}
.img {
  margin: auto;
  width: 80%;
  height: 62%;
}
.s1 {
  margin-left: 5.5%;
  color: #99a9bf;
  text-decoration: line-through;
}
.dc1:hover {
  width: 17.5%;
  background: #ffffff;
  margin-left: 2.5%;
  margin-bottom: 20px;
  height: 450px;
  box-shadow: 2px 2px 10px #cfcfcf, 5px 5px 20px #000;
}
p {
  margin: 0;

  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  margin: auto;
  width: 90%;
  margin-top: 5%;
}

.pa1 {
  color: #000;
}
.pa2 {
  color: #99a9bf;
}
.pa3 {
  color: red;
}
</style>